<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<link rel="stylesheet" href="css/rest.css" />
	<link rel="stylesheet" href="css/style.css" />
	<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
	<script>
		$(document).ready(function(){
			$("form :input.required").each(function(){ 
			var $required = $("<strong class='high'>*</strong>");
			$(this).parent().append($required);
			});
			$("#username").focus(function(){   
			 var txt_value = $(this).val();
			 if (txt_value=="请创建一个新用户名") {
			 	$(this).val("")
			 	
			 }
			
			});
			$('form :input').blur(function(){
          var $parent = $(this).parent();
          $parent.find(".formtips").remove();
           //验证用户名
			if( $(this).is('#username') ){
				if ( this.value=="" || this.value.length < 6 ) {
				
					var errorMsg="请输入至少6位数的新用户名";
					$parent.append('<span class="formtips onError">'+errorMsg+'</span>')
					
				} else{
					var okMsg = "输入正确";
					$parent.append('<span class="formtips onSuccess">'+okMsg+'</span>')
				}
				
			}
			if($(this).is("#email")){
				var $parent = $(this).parent();
				$parent.find(".formtips").remove();
				if (this.value==""|| ( this.value!="" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value) )) {
					var errorMsg ="请输入正确的邮箱地址";
				$parent.append('<span class="formtips onError">'+errorMsg+'</span>')
				} else{
					var okMsg ="输入正确";
					$parent.append('<span class="formtips onSuccess">'+okMsg+'</span>')
					
				}
			}
			});
				
			$("#username").blur(function(){ 
			var txt_value = $(this).val();
			if (txt_value=="") {
				$(this).val("请创建一个新用户名")				
			}
			});
			 $("#email").focus(function(){ 
			 var txt_value = $(this).val();
			 if (txt_value=="请输入邮箱地址") {
			 	$(this).val("")			 	
			 }
			 });
			 $("#email").blur(function(){ 
			 var txt_value = $(this).val();
			 if (txt_value=="") {
			 	$(this).val("请输入邮箱地址")
			 }
			 });
			 
		})
	</script>
	<body>
		<form method="post" action="">
    <div class="int">
        <label for="username">用户名:</label>
        <!-- 为每个需要的元素添加required -->
        <input type="text" id="username" class="required"  value="请创建一个新用户名"/>
    </div>
    <div class="int">
        <label for="email">邮箱:</label>
        <input type="text" id="email" class="required"  value="请输入邮箱地址"/>
    </div>
    <div class="int">
        <label for="personinfo">个人资料:</label>
        <input type="text" id="personinfo" />
    </div>
    <div class="sub">
        <input type="submit" value="提交" id="send"/><input type="reset" id="res"/>
    </div>
</form>
	</body>
</html>
